<template>
    <div>
        <navbar :title="$t('lab_tip_4')" :backCallback="back"></navbar>
        <section class="content" style="padding-bottom: 46px">
            <ul style="min-height: calc(100% - 137px);padding: 0px 40px 0px 20px;">
                <li v-for="(item,index) in unitList" :key="item.ilsId" class="evaluate-li">
                    <label class="check-box " v-if="item.status == 3">
                        <input type="checkbox"  class="ck" name="chooseList" v-model="chooseList" v-bind:value="item.ilsId" v-on:click="watchCheck(index)">
                        <!-- <i class="nocheck"  v-bind:class="{'fa-check':item.selectThis}"></i> -->
                        <span class="font-size16">
                            {{item.ilsTitle}}
                            <em class="color-orange">({{$t('lab_tip_5')}})</em>
                            </span>
                    </label>
                    <label class="check-box " v-if="item.status == 2">
                        <input type="checkbox"  class="ck" name="chooseList" v-model="chooseList" v-bind:value="item.ilsId" disabled="disabled">
                        <!-- <i class="nocheck"></i> -->
                        <span class="font-size16">{{item.ilsTitle}}<em class="color-green">({{$t('lab_tip_6')}})</em></span>
                    </label>
                    <label class="check-box " v-if="item.status == 1">
                        <input type="checkbox" class="ck" name="chooseList" v-model="chooseList" v-bind:value="item.ilsId" disabled="disabled"/>
                        <!-- <i class="nocheck"></i> -->
                        <span class="font-size16">{{item.ilsTitle}}<em class="color-pink">({{$t('lab_tip_7')}})</em></span>
                    </label>
                    <label class="check-box " v-if="item.status == 0">
                        <input type="checkbox" class="ck" name="chooseList" v-model="chooseList" v-bind:value="item.ilsId" disabled="disabled"/>
                        <!-- <i class="nocheck"></i> -->
                        <span class="font-size16">{{item.ilsTitle}}<em class="color-pink">({{$t('lab_unknown')}})</em></span>
                    </label>
                    <p class="evaluate-li-p"><span class="color-gray999">{{$t('address')}}：</span>{{item.ilsPlace}}</p>

                    <p class="evaluate-li-p"><span class="color-gray999">{{$t('group_instructor')}}：</span>
                        <template v-if="item.itiName!=null">
                            {{item.itiName}}
                        </template>
                        <template v-else>
                            --
                        </template>
                    </p>

                    <div class="evaluate-li-p" style="width: 100%">
                        <span class="color-gray999 term-tltle">{{$t('the_term')}}：</span>

                        <div class="term-date">
                            <span class="term-date">{{item.ilsStartTime | substringTime}}</span>
                            <em class="color-gray999" style="margin: 5px">{{$t('time_to')}}</em>
                            <span class="term-date">{{TimeSubstring(item.ilsEndTime)}}</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="text-center" style="    margin-bottom: 56px;">
                <button class="btn wzb-btn-green" @click="gotoAnswer">{{$t('sure')}}</button>
                <button class="btn wzb-btn-green" @click="back">{{$t('cancel')}}</button>
            </div>
        </section>
        <van-dialog
        v-model="tstErrorTips"
        :title="$t('select_least_one')"
        :confirmButtonText="$t('sure')"
        >
        </van-dialog>
    </div>
</template>

<script>

export default {
    name: 'unitList',
    data() {
        return {
            unitList: [],
            chooseList: [],
            itmId: this.$route.params.itmId,
            moduleId: this.$route.params.moduleId,
            appId: this.$route.params.appId ? this.$route.params.appId : null,
            shareLink: this.$route.params.shareLink === '1' ? 1 : 0,
            encodeItmId: this.$route.params.encodeItmId ? this.$route.params.encodeItmId : 0,
            tstErrorTips: false
        };
    },
    methods: {
        TimeSubstring(time) {
            this.newTime = time.split(' ')[1];
            this.newTimeAng = this.newTime.substring(0, this.newTime.indexOf(':', this.newTime.indexOf(':') + 1));
            return this.newTimeAng;
        },
        unitDetail: function() {
            // 获取培训单元信息
            let moduleId = this.moduleId;
            let itmId = this.itmId;
            this.$axios({
                url: '/app/api/trainee/course/lesson/evalList?modId=' + moduleId + '&itmId=' + itmId,
                method: 'GET'
            }).then(res => {
                if (res.status === 200) {
                    this.unitList = res.data;
                    for (var i = 0; i < this.unitList.length; i++) {
                        this.unitList[i].selectThis = false;
                    }
                }
            });
        },
        watchCheck: function(index) {
            this.watchSelect(index);
        },
        gotoAnswer: function() {
            var len = this.chooseList.length;
            if (len === 0) {
                this.tstErrorTips = true;
                return;
            }
            var lessonStr = '';
            for (var i = 0; i < len; i++) {
                if (i !== len - 1) {
                    if (i === 0) {
                        lessonStr = this.chooseList[i] + ',';
                    } else {
                        lessonStr += this.chooseList[i] + ',';
                    }
                } else {
                    lessonStr += this.chooseList[i];
                }
            };
            this.$router.replace({path: `/aceCertifiedDetail`, query: {itmId: this.itmId, modId: this.moduleId, lessonStr: lessonStr, appId: this.appId, encItmId: this.encodeItmId, shareLink: this.shareLink, operation: 1}});
        },
        back() {
            this.$router.go(-1);
        },
        watchSelect: function(index) {
            if (this.unitList[index].selectThis === true) {
                this.unitList[index].selectThis = false;
            } else {
                this.unitList[index].selectThis = true;
            }
        }
    },
    mounted: function() {
        this.unitDetail();
    },
    computed: {
    }
};
</script>

<style scoped lang="less">
@import "./courseLess.less";
@import "./aceDetail.less";

</style>
